<template>
  <div class="center_bottom">
    <div class="left">
      <h1 class="title">最受欢迎职业前十</h1>
      <ul class="list">
        <li class="item" v-for="(item, index) of position_top10" :key="'position_top10'+index">
          <img src="@/assets/img/icon.png" alt="">
          <p>{{item.name}}</p>
        </li>
      </ul>
    </div>
    <div class="right">
      <h1 class="title">最受欢迎企业前十</h1>
      <ul class="list">
        <li class="item" v-for="(item, index) of company_top10" :key="'company_top10'+index">
          <img src="@/assets/img/icon.png" alt="">
          <p>{{item.company_name}}</p>
        </li>
      </ul>
    </div>
    <div class="line"></div>
  </div>
</template>

<script>
import {getFavourite} from "../api";

export default {
  name: 'CenterBottom',
  data () {
    return {
      company_top10: [],
      position_top10: []
    }
  },
  methods: {
    getFavour () {
      setInterval(() => {
        getFavourite().then(res => {
          const data = res.data.data
          this.company_top10 = data.company_top10
          this.position_top10 = data.position_top10
        })
      }, 2000)
    }
  },
  mounted () {
    this.getFavour()
  }

}
</script>

<style lang="scss" scoped>
@import "src/assets/scss/var_";

.center_bottom {
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  position: relative;

  .left, .right {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      text-align: center;
      padding: $padding_3 0;
      background: #237edf;
      width: $width_115;
      height: $height_15;
      line-height: $height_15;
      /*margin-left: calc(50% - 60px);*/
      margin-top: $fontSize_14;
      font-size: $fontSize_7;
      background-image: linear-gradient(45deg, #1d77dd, #46b6f7);
    }

    .list {
      padding: 10px;

      .item {
        height: $fontSize_18;
        line-height: $fontSize_18;
        font-size: $fontSize_12;
        display: flex;
        align-items: center;

        p {
          margin-left: 5px;
        }

        img {
          height: $fontSize_10;
        }
      }
    }
  }

  .right {

  }

  .line {
    position: absolute;
    width: 1px;
    height: 100%;
    background: #4ab4cf;
    left: 50%;
    top: 30%;
  }
}
</style>
